// @/utils/observe.js

/**
 * 观察元素是否进入视口，用于实现滚动触发动画
 * @param {String} selector - 元素选择器
 * @param {Function} callback - 进入视口时的回调函数
 * @param {Object} options - 观察选项
 * @returns {IntersectionObserver} 观察器实例
 */
export function observeInView(selector, callback, options = {}) {
  const element = document.querySelector(selector);
  if (!element) {
    console.error(`未找到元素: ${selector}`);
    return null;
  }

  // 合并默认选项
  const defaultOptions = {
    root: null,             // 视口作为参照
    rootMargin: '0px',      // 参照区域边距
    threshold: 0.1          // 元素可见10%即触发
  };
  const observerOptions = { ...defaultOptions, ...options };

  // 创建观察器
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        callback(true);
        // 触发后是否断开观察（默认触发一次）
        if (observerOptions.once !== false) {
          observer.unobserve(element);
        }
      }
    });
  }, observerOptions);

  // 开始观察
  observer.observe(element);
  
  return observer;
}

/**
 * 批量观察多个元素
 * @param {String} selector - 元素选择器
 * @param {Function} callback - 每个元素进入视口时的回调函数
 * @param {Object} options - 观察选项
 * @returns {IntersectionObserver} 观察器实例
 */
export function observeInViewBatch(selector, callback, options = {}) {
  const elements = document.querySelectorAll(selector);
  if (elements.length === 0) {
    console.error(`未找到元素: ${selector}`);
    return null;
  }

  const defaultOptions = {
    root: null,
    rootMargin: '0px',
    threshold: 0.1
  };
  const observerOptions = { ...defaultOptions, ...options };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        callback(entry.target, true);
        if (observerOptions.once !== false) {
          observer.unobserve(entry.target);
        }
      }
    });
  }, observerOptions);

  elements.forEach(element => {
    observer.observe(element);
  });
  
  return observer;
}